
<template>
  <div>
    <z-space vertical>
      <h3>form</h3>
      <z-form-template :slots="search.slots"
                       :def="search.def"
                        ref="searchForm"
                       @fire="search.onFire"
      >

      </z-form-template>
    </z-space>
  </div>
</template>

<script>
import {
  FormInput,
  FormInputNativeNumber,
  FormInputNativeInteger,
  FormSelect,
  FormRadio,
  FormCheckbox, FormBase, FormTextarea
} from "@/zpkgs/hooks/form";

import {validateRulesCreator} from "../../../static/ext/form/validate";
// console.log(validateRulesCreator.idCard(true))

export default {
  components: {},
  data() {
    return {
    }
  },
  setup() {
    let search =  {
      slots: {
        object_beforeend: `
<z-space style="margin-left: 10px;">
<el-button @click="zform__callEvent('form-submit', scope, $event)"">提交</el-button>
</z-space>
`
      },
      def: {
        ui: {
          attrs: Object.entries({
            'test-attr': 1
          })
        },
        // 全局配置
        globalConfig: {
          message: {
            required(propKey, propDef) {
              return '必填'
            }
          }
        },
        properties: {
          text: {
            ...FormInput('文字必填'),
            rules: [
              {
                required: true
              }
            ],
          },
          maxText: {
            ...FormInput('须超过10个字', {
              widgetConfig: {
                maxlength: 30
              }
            }),
            rules: [
              {
                required: true
              },
              {
                validator(rule, value, callback){
                  if(value.length < 10){
                    callback('须超过10个字')
                  }
                  callback()
                },
                trigger: 'change'
              }
            ],
          },
          smsCode: {
            ...FormInput('6位字符'),
            rules: [
              validateRulesCreator.required(),
              validateRulesCreator.min(6),
              validateRulesCreator.max(6)
            ],
          },
          idCard: {
            ...FormInput('身份证'),
            rules: [
              validateRulesCreator.required(),
              validateRulesCreator.idCard(true, )
            ],
          },
          integer: {
            ...FormInputNativeInteger('手机号'),
            rules: [
              validateRulesCreator.required(),
              validateRulesCreator.phone(true, )
            ],
          },
          startTime: {
            ...FormBase('日期时间', {
              ui: {
                widget: 'CusDateTimePicker'
              }
            }),
            rules: [
              validateRulesCreator.required(),
            ],
          },
          actDate: {
            ...FormBase('活动日期', {
              ui: {
                widget: 'CusDatePicker',
                wrap_start_tag: 'el-row',
                wrap_start_tag_attrs: Object.entries({
                  style: 'display: flex;'
                })
              }
            }),
            rules: [],
          },
          actTime: {
            ...FormBase('', {
              ui: {
                widget: 'CusTimePicker',
                form_item: {
                  labelWidth: '30px',
                },
                wrap_end_tag: 'el-row',
                styles: [
                  ['margin-left', '20px']
                ]
              }
            }),
            rules: [],
          },
          textarea: {
            ...FormTextarea('评论', {

            }),
            rules: [],
          },
        },
      },
      async onFire([type, args, ctx] = []) {
        console.log(type, args, ctx)
        let [err, [isValid]] = await  ZY.awaitTo(ctx.submit())
        // console.log(isValid)
        if (isValid) {
          let d = ctx.getData()
          console.log(d)
        }
      }
    }

    return {
      search,
    }
  }
}
</script>
